<template>
  <div>toRaw和markRaw!</div>
  <h2>state:{{ state }}</h2>
  <button @click="toRawFn">toRaw</button>
  <button @click="markRawFn">markRaw</button>
</template>

<script lang="ts">
import {defineComponent, reactive, toRaw, markRaw} from 'vue';

interface UserInfo {
  name: string,
  age: string,
  likes?: string[]
}

export default defineComponent({
  name: 'App',
  components: {},

  setup() {
    const state = reactive<UserInfo>({
      name: 'state',
      age: '123',
    })
    const toRawFn = () => {
      // const user = toRefs(state)
      //toRaw 标记的响应式对象，变成普通对象。数据变化，界面不在改变
      const user = toRaw(state)
      user.name += '#####'
      console.log('toRaw执行了', user)
    }
    const markRawFn = () => {
      console.log('markRawFn')
      const likes = ['h1', 'p1']
      //markRaw标记的对象数据，再也不能成为代理对象。数据变化，界面不在改变
      state.likes = markRaw(likes)
      setInterval(() => {
        state.likes ? state.likes[0] += '222222' : ''
        console.log(state)
      }, 1000)
    }
    return {
      state,
      toRawFn,
      markRawFn
    }
  }
});
</script>

<style>

</style>

